<template>
  <div >
    <headert :seller="seller"></headert>
    <div class="tab border-1px">
      <div class="tab-item ">
         <router-link to="/goods">商品</router-link >
      </div>
      <div class="tab-item ">
        <router-link   to="/ratings">评论</router-link >

      </div>
      <div class="tab-item ">
        <router-link  to="/seller">商家</router-link >
      </div>
    </div>
    <keep-alive>
      <router-view :seller="seller">
      </router-view>
      </keep-alive>
  </div>
</template>

<script>
  import {urlParse} from '@/common/js/util'
  import headert from './components/header/headert'
  const ERR_OK=0;
export default {
  name: 'App',
  components:{
    headert
  },data(){
    return{
      seller:{
        id:(()=>{
            let queryParam=urlParse();
            console.log(queryParam);
            return queryParam.id;
        })()
      }
    }
  },
  created:function(){
    this.$ajax.get("/api/seller?id="+this.seller.id)
      .then(reponse=>{
        if(reponse.data.errno===ERR_OK){
          this.seller=reponse.data.data;
          console.log(this.seller)
        }

      })
      .catch(error=>{
        console.log(error)
      })


    this.$ajax.get("https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods")
      .then(reponse=>{
        console.log("汉堡");
        console.log(reponse)
        this.type0Goods=reponse.data[0];
        this.type1Goods=reponse.data[1];
        this.type2Goods=reponse.data[2];
        this.type3Goods=reponse.data[3];

      })
      .catch(error=>{
        console.log(error)
      })
  },
}
</script>

<style lang="less" scoped>
 /*@import "./common/stylus/mlxin.less";*/
    .tab {
      display: flex;
      width: 100%;
      height: 40px;
      line-height: 40px;
      //border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      //border-1px(rgba(7,17,27,0.1))
      .tab-item {
        flex: 1;
        text-align: center;
        & > a {
          display: block;
          font-size: 14px;
          color: rgb(77, 85, 93);
          &.active {
            color: red;
          }
        }
      }
    }
</style>
